import React, { Component } from 'react';
import style from './index.module.scss';
import Banner from './../../components/mudibanner';
import { getBanners, getSub } from './../../api';
// import {  SegmentedControl } from 'antd-mobile';
import { NavLink } from 'react-router-dom'
import Footer from './../../components/footer'

class Com extends Component {
  state = {
    bannerlist: [],
    sublist: [],
    num: 1,
    shezi: 1
  }

  change(mynum){
    this.setState({
        num:mynum
    })
}

    she(to){
      this.setState({
        shezi: to
      })
    }
   
  
  componentDidMount() {
    getBanners().then(res => {
      this.setState({
        bannerlist: res.data.data.slideshow
      })
    })

    getSub().then(res => {
      this.setState({
        sublist: res.data.data
      })
    })
  }

  

  onChange = (e) => {
    console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  }
  onValueChange = (value) => {
    console.log(value);
  }

  render() {
    return (
      <div className='box'>
        <div className="content">
          <div className={style.banner}>
            <Banner bannerlist={this.state.bannerlist}></Banner>
            <div className={style.aj}>
              <NavLink to="/destination/location" className={style.ding}></NavLink>
              <NavLink to="/destination/location" className={style.address}>厦门</NavLink>
              <NavLink to="/search"><input type="text" className={style.serch} placeholder='搜索目的地' disabled/></NavLink>
              
              <span className={style.baidu}></span>
              <span className={style.souchang}></span>
            </div>
          </div>
          {/* 旅游分类 */}
          <div className={style.fenlei}>
            {/* <div > */}
              <NavLink to="/destination/holidaytravel" className={style.lvyou}>
                <div className={style.lvyou_tu1}></div>
                <p className={style.p1}>假日旅行</p>
              </NavLink>
            {/* </div> */}
            {/* <div className={style.lvyou}> */}
              <NavLink to="/destination/surrounding" className={style.lvyou}>
                <div className={style.lvyou_tu2}></div>
                <p className={style.p1}>周边景点</p>
              </NavLink>
            {/* </div> */}
            <NavLink to="/destination/travelroute" className={style.lvyou}>
              <div className={style.lvyou_tu3}></div>
              <p className={style.p1}>出游路线</p>
            </NavLink>
            <NavLink to="/destination/alllandscapes" className={style.lvyou}>
              <div className={style.lvyou_tu4}></div>
              <p className={style.p1}>所有景观</p>
            </NavLink>
          </div>
          {/* 当季热门 */}
          <div className={style.hot}>
            <div className={style.hottop}>
              <span className={style.houto}>当季热门</span>
                <div className={style.hotright}>
                  <div className={this.state.shezi===1 ? style.shou : style.noshou } onClick={() => this.she(1)} style={ {borderTopLeftRadius: '3px', borderBottomLeftRadius: '3px'}}>春</div>
                  <div className={this.state.shezi===2 ? style.shou : style.noshou } onClick={() => this.she(2)}>夏</div>
                  <div className={this.state.shezi===3 ? style.shou : style.noshou } onClick={() => this.she(3)}>秋</div>
                  <div className={this.state.shezi===4 ? style.shou : style.noshou } onClick={() => this.she(4)} style={ {borderTopRightRadius: '3px', borderBottomRightRadius: '3px'}}>冬</div>
                  {/* <WingBlank size="lg" >
                      <SegmentedControl
                        values={['春', '夏', '秋', '冬']}
                        tintColor={'#3CD578'}
                        style={{ height: '0.15rem', width: '0.75rem', borderRadius: '0' }}
                      />
                  </WingBlank> */}
                </div>
            </div>
            <div className={style.hottutu}>
              {
                this.state.sublist.map(item => {
                  return <img key={item.subjectid} src={item.img} alt="" />
                })
              }
            </div>
          </div>
          {/* 主题推荐 */}
          <div className={style.Recommend}>
              <div className={style.tuitou}>
                <span className={style.tuiwen}>主题推荐</span>
                <div className={style.huan}>
                  <span className={style.huanwen}>换一批</span>
                  <div className={style.hui}></div>
                </div>
              </div>
              <div className={style.tabqie}>
                {/* tab切换 */}
                <div className={this.state.num===1 ? style.show :style.tab } onClick={()=>this.change(1)}>历史古迹</div>
                <div className={this.state.num===2 ? style.show :style.tab } onClick={()=>this.change(2)}>自然风光</div>
                <div className={this.state.num===3 ? style.show :style.tab } onClick={()=>this.change(3)}>民族乡土</div>
                <div className={this.state.num===4 ? style.show :style.tab } onClick={()=>this.change(4)}>摩登都市</div>
              </div>
          </div>
          {/* 推荐图片 */}
          <div className={style.tuitu}>
              {
                this.state.sublist.map(item => {
                  return <img key={item.subjectid} src={item.img} alt="" />
                })
              }
          </div>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
